<template>
	<div class="helper-wrapper flex-page-wrapper" @click="closeMenu">
		<uni-nav-bar statusBar backgroundColor="#1E234B" color="#fff" :title="$t('newfoot2')"></uni-nav-bar>
		<tabs @forumDateFn="forumDateFn" ref="tabs"></tabs>
		<view class="flex-page">
			<view style="height: 100%; width: 100%; overflow: auto;" scroll-y="true" scroll-x="true">
				<view class="list" :style="{ width: listWidth(yaoyues) }">
					<view class="item" v-for="(item, index) in times" :key="index">
						<view class="time">{{ item }}</view>
					</view>
					<view class="data-wrapper">
						<view class="left">
							<div class="forum-item" @click="itemFn(item)" v-for="(item, index) in list" :style="{ top: item.top, bottom: item.bottom }" :key="index">
								<div class="title">{{ item['forumName' + En] }}</div>
								<div class="addr">
									<image class="icon" src="https://static.inclusionconf.com/static/images/xingcheng-addr-icon.png" mode="widthFix"></image>
									<div class="text">{{ item['forumAddr' + En] }}</div>
								</div>
							</div>
						</view>
						<view class="right">
							<div class="forum-item" v-for="(item, index) in yaoyues" :style="{ top: item.top, bottom: item.bottom, transform: `translateX(${ itemLeft(item, index) })` }" :key="index" @click="openFn(item)">
								<div class="title">{{ item['forumName' + En] }}</div>
								<div class="addr" v-if="item.showAddr">
									<image class="icon" src="https://static.inclusionconf.com/static/images/xingcheng-addr-icon.png" mode="widthFix"></image>
									<div class="text ellipsis1">{{ item['forumAddr' + En] }}</div>
								</div>
							</div>
						</view>
					</view>
				</view>
			</view>
			<div class="btns" v-if="!list.length && !yaoyues.length">
				<view class="title">暂无行程</view>
				<div class="btn on" @click="yuyueFn">预约论坛</div>
				<!-- <div class="btn" @click="toBusiness">参加产业对接会</div> -->
			</div>
		</view>
		<!-- <div class="bottom-btns">
			<div class="btn" @click="toForm">
				<image class="icon" src="https://static.inclusionconf.com/static/images/chat/edit-black.png" mode="widthFix"></image>
				<view class="text">
					编辑论坛
				</view>
			</div>
			<div class="btn" @click="toChanye">
				<image class="icon" src="https://static.inclusionconf.com/static/images/chat/edit-black.png" mode="widthFix"></image>
				<view class="text">
					编辑产业对接会
				</view>
			</div>
		</div> -->
		<foot-wap :value="2"></foot-wap>

		<pub-mask v-if="showMask" :title="`线下邀约`" @close="showMask = false">
			<div class="status-mask">
				<div class="title">
					{{ detail['forumName' + En] }}
				</div>
				<div class="addr">
					<image class="icon" src="https://static.inclusionconf.com/static/images/chat/time-icon-black.png" mode="widthFix"></image>
					<div class="text ellipsis1">{{ detail['forumAddr' + En] }}</div>
				</div>
				<div class="addr">
					<image class="icon" src="https://static.inclusionconf.com/static/images/xingcheng-addr-icon.png" mode="widthFix"></image>
					<div class="text ellipsis1">{{ detail['forumAddr' + En] }}</div>
				</div>
			</div>
		</pub-mask>
		<web-tips v-if="showTips"></web-tips>
	</div>
</template>

<script>
	import protal from "@/api/protal"
	import tabs from "./components/tabSec.vue"
	import JSEncrypt from '../../static/jsencrypt.min.js'

	export default {
		components: {
			tabs,
		},
		data() {
			return {
				times: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
				list: [],
				yaoyues: [],
				resData: null,
				detail: {},
				showMask: false,
				vid: '',
				showTips: false
			}
		},
		onLoad(options) {
			// #ifdef MP-ALIPAY
			console.log(options, '个人中心参数')
			if (options.verifyEventInfo) {
				const query = JSON.parse(options.query)
				const verifyEventInfo = JSON.parse(options.verifyEventInfo)
				this.vid = verifyEventInfo.vid
				console.log(this.vid, '打印一下SN vid')
			}
			// #endif
		},
		async onShow() {
			this.showTips = true
			if (this.vid) {
				await protal.vidLogin({
					vid: this.getCrypt()
				}).then(res => {
					if (res.code === '0000') {
						uni.setStorageSync('token', res.data.token)
					}
				})
			}
			this.$refs.tabs.getData()
		},
		onHide() {
			this.showTips = false
		},
		methods: {
			getCrypt() {
				var str = this.vid;
				// 公钥
				var publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCyuMRsaJXsRs/IhUBsQeVU87qpa/ndLmSE0zkEq48K7ADmk/5jlwpP/FLXNn6xCexGOp1MOeSEmOEa6OrLrxS3UI+U8e/dJNoj+QAe2fQPMi73mZQv497P0Q2WaVeW6PSkuaTRSMDJCN2S8c/y+Y+5VmaX6uNOA48uSI/WpXAzwIDAQAB";
				// 加密
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey(publicKey);
				var encryptStr = encrypt.encrypt(str);
				return encryptStr
			},
			toForm() {
				uni.navigateTo({
					url: '/pages/jianjieForum/index?date=' + this.forumDate
				})
			},
			toChanye() {
				uni.navigateTo({
					url: '/pages/business/index'
				})
			},
			openFn(item) {
				this.detail = item
				this.showMask = true
			},
			itemFn(item) {
				uni.navigateTo({
					url: '/pages/jianjieForum/detail?uuid=' + item.forumUuid
				})
			},
			setDom() {
				this.list = this.list.map(x => {
					x.top = this.getPosition(x.startTime)
					x.bottom = this.getPosition(x.endTime, true)
					return x
				})
				this.yaoyues = this.yaoyues.map(x => {
					x.top = this.getPosition(x.startTime)
					x.bottom = this.getPosition(x.endTime, true)
					x.level = 1
					const start = new Date(`2025 ${ x.startTime }`).getTime()
					const end = new Date(`2025 ${ x.endTime }`).getTime()
					x.showAddr = (end - start) >= 50 * 60 * 1000
					return x
				})
				console.log(this.yaoyues, 666)
			},
			setData() {
				if (this.resData && this.resData[this.forumDate]) {
					// dataType: 1论坛,2活动3,商务洽谈
					this.list = this.resData[this.forumDate].filter(x => x.dataType == 1)
					this.yaoyues = this.resData[this.forumDate].filter(x => x.dataType == 3)
					this.setDom()
				} else {
					this.list = []
					this.yaoyues = []
				}
			},
			queryTripList() {
				protal.queryTripList().then(res => {
					this.resData = res.data || null
					this.setData()
				})
			},
			getPosition(time, isBottom) {
				const hour = Number(time.split(':')[0])
				const minutes = Number(time.split(':')[1])
				const first = this.times[0]
				const last = this.times[this.times.length - 1]
				const firstHour = Number(first.split(':')[0])
				const lastHour = Number(last.split(':')[0])
				const total = this.times.length
				let percent = '0%'
				let top = ((hour - firstHour) / total + (minutes / 60) * (1 / total)) * 100
				if (isBottom) {
					percent = `calc(${ 100 - top + '%' } - 30px)`
				} else {
					percent = top + '%'
				}
				return percent
			},
			itemLeft(item, index) {
				const arr = this.yaoyues.slice(0, index + 1)
				arr.forEach(x => {
					const itemStart = new Date(`2025 ${ item.startTime }`).getTime()
					const itemEnd = new Date(`2025 ${ item.endTime }`).getTime()
					const xStart = new Date(`2025 ${ x.startTime }`).getTime()
					const xEnd = new Date(`2025 ${ x.endTime }`).getTime()
					if (item.uuid != x.uuid) {
						if (itemStart > xStart && itemStart < xEnd) {
							item.level = x.level + 1
						} else if (itemEnd > xStart && itemEnd < xEnd) {
							item.level = x.level + 1
						} else if (itemStart == xStart && itemEnd == xEnd) {
							item.level = x.level + 1
						}
					}
				})
				return (item.level - 1) * 280 + 'rpx'
			},
			listWidth(arr) {
				const nums = arr.map(x => x.level)
				const max = Math.max(...nums)
				return `${ 750 + (max - 1) * 280 }rpx`
			},
			forumDateFn(v) {
				this.jsAPI('waitanh5_at_datetabClick', {
					contentName_var: v
				})
				this.forumDate = v
				this.queryTripList()
			},
			yuyueFn() {
				uni.navigateTo({
					url: '/pages/jianjieForum/index'
				})
			},
			toBusiness() {
				uni.navigateTo({
					url: '/pages/business/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.helper-wrapper {

		.flex-page {
			position: relative;
		}

		.list {
			padding-left: 24rpx;
			position: relative;

			.item {
				width: 100%;
				display: flex;
				align-items: center;
				height: 58px;

				.time {
					font-family: AlibabaPuHuiTi_3_55_Regular;
					font-size: 26rpx;
					color: #000000;
					line-height: 36rpx;
					font-style: normal;
					width: 86rpx;
				}

				&::after {
					content: "";
					flex: 1;
					height: 1rpx;
					background: rgba(60, 45, 170, 0.12);
				}
			}

			.data-wrapper {
				position: absolute;
				left: 110rpx;
				top: 0;
				bottom: 0;
				width: 640rpx;
				display: flex;
			}

			.left {
				flex: 0 0 280rpx;
				// border-right: 1px dashed rgba(115, 80, 245, 0.5);
				position: relative;

				.forum-item {
					position: absolute;
					left: 0;
					width: 272rpx;
					margin-top: 30px;
					overflow: hidden;
					background: #EEEDFA;
					border-radius: 8px;
					background-color: #EEEDFA;

					&:before {
						position: absolute;
						content: "";
						left: 0;
						top: 0;
						width: 3px;
						height: 100%;
						background: #3C2DAA;
					}

					.title {
						padding: 6px 10px 0 12px;
						font-family: AlibabaPuHuiTi_3_75_SemiBold;
						font-size: 14px;
						color: #3C2DAA;
						line-height: 18px;
						text-align: left;
						font-style: normal;
					}

					.addr {
						position: absolute;
						left: 12px;
						bottom: 6px;
						display: flex;
						align-items: center;

						.icon {
							width: 12px;
							height: auto;
						}

						.text {
							font-family: AlibabaPuHuiTi_3_55_Regular;
							font-size: 12px;
							color: #1E234B;
							line-height: 12px;
							text-align: left;
							font-style: normal;
							margin-left: 3px;
						}
					}
				}
			}

			.right {
				position: relative;
				flex: 1;

				.forum-item {
					position: absolute;
					left: 4px;
					width: 272rpx;
					margin-top: 30px;
					overflow: hidden;
					background: #EEEDFA;
					border-radius: 8px;
					background-color: #EEEDFA;

					&:before {
						position: absolute;
						content: "";
						left: 0;
						top: 0;
						width: 3px;
						height: 100%;
						background: #3C2DAA;
					}

					.title {
						padding: 6px 10px 0 12px;
						font-family: AlibabaPuHuiTi_3_75_SemiBold;
						font-size: 14px;
						color: #3C2DAA;
						line-height: 18px;
						text-align: left;
						font-style: normal;
						white-space: nowrap;
					}

					.addr {
						position: absolute;
						left: 12px;
						bottom: 6px;
						display: flex;
						align-items: center;

						.icon {
							width: 12px;
							height: auto;
						}

						.text {
							font-family: AlibabaPuHuiTi_3_55_Regular;
							font-size: 12px;
							color: #1E234B;
							line-height: 12px;
							text-align: left;
							font-style: normal;
							margin-left: 3px;
						}
					}
				}
			}
		}

		.btns {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.title {
				position: absolute;
				left: 0;
				right: 0;
				top: -50px;
				font-family: AlibabaPuHuiTi_2_85_Bold;
				font-size: 16px;
				color: #000000;
				line-height: 20px;
				text-align: center;
				font-style: normal;
			}

			.btn {
				width: 160px;
				height: 40px;
				border-radius: 20px;
				border: 1px solid #7350F5;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 14px;
				color: #7350F5;
				line-height: 20px;
				text-align: center;
				font-style: normal;
				margin-bottom: 10px;

				&.on {
					background-color: #7350F5;
					color: #fff;
				}
			}
		}
	}

	.bottom-btns {
		display: flex;
		padding: 16px 0;
		height: 54px;
		background: #D9D7E0;
		box-sizing: border-box;

		.btn {
			flex: 1;
			align-items: center;
			display: flex;
			justify-content: center;

			&:first-child {
				border-right: 1px solid rgba(19, 24, 64, 0.15);
			}

			.icon {
				width: 15px;
				margin-right: 6px;
			}

			.text {
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 14px;
				color: #131840;
				line-height: 20px;
				font-style: normal;
			}
		}
	}

	.status-mask {
		padding: 18px 16px;

		.title {
			font-family: AlibabaPuHuiTi_3_65_Medium;
			font-size: 18px;
			color: #0A0F1A;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			margin-bottom: 23px;
		}

		.addr {
			display: flex;
			position: relative;
			padding-left: 17px;

			.icon {
				position: absolute;
				left: 0;
				top: 3px;
				width: 12px;
				margin-right: 5px;
				overflow: hidden;
			}

			.text {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 13px;
				color: #1E234B;
				line-height: 18px;
				text-align: left;
				font-style: normal;
			}
		}
	}
</style>